@extends('layouts.app')

@section('content')
    <div style="min-height: 600px;" class="white-bg mt-2">
        <form method="POST" action="{{ route('register') }}" name="formInfo" id="formInfo">
            @csrf
            <div class="weui-cells weui-cells_form no-border">
                <div class="weui-cells no-border">
                    <div class="weui-cell">
                        <div class="weui-cell__hd">
                            <label class="weui-label f30">
                                <svg class="icon f48" aria-hidden="true">
                                    <use xlink:href="#icon--17"></use>
                                </svg>
                                手机号:
                            </label>
                        </div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" name="mobile" type="number" placeholder="请输入手机号">
                        </div>
                    </div>
                    <div class="weui-cell">
                        <div class="weui-cell__hd">
                            <label class="weui-label f30">
                                <svg class="icon f48" aria-hidden="true">
                                    <use xlink:href="#icon--16"></use>
                                </svg>
                                密&nbsp;&nbsp;&nbsp;码:
                            </label>
                        </div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" name="password" type="password" placeholder="请输入密码">
                        </div>
                    </div>
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <input class="weui-input-border" name="validateCode" type="number" placeholder="请输入验证码">
                        </div>
                        <div class="weui-cell__hd">
                            <button type="button" class="weui-btn weui-btn_mini weui-btn_blue get-code">发送验证码</button>
                        </div>
                    </div>
                    <div class="weui-cell">
                        <button type="button" class="weui-btn weui-btn_blue btn-register f30">注册</button>
                    </div>
                </div>
            </div>
        </form>
    </div>



    <script>
        var timer;
        // 点击获取验证码
        $(".get-code").click(function () {
            console.log("timer", timer);
            var mobile = $("input[name='mobile']").val();
            var _token = $("input[name='_token']").val();
            if (mobile) {
                if (!timer) {
                    $.post("/sendCode", {
                        _token: _token,
                        mobile: mobile
                    }, function (res) {
                        console.log("res", res);
                        $.toast(res.info, 'text');
                        if (res.code == 10000) {
                            if (!timer) {
                                countdown(60);
                            }
                        }
                    });
                }

            } else {
                $.toast("手机号不能为空！", 'text');
            }

        });

        // 倒计时
        function countdown(num) {
            if (num > 0) {
                num--;
                $(".get-code").text("重新发送(" + num + ")").addClass("weui-btn_gray");
            } else {
                clearTimeout(timer);
                timer = 0;
                $(".get-code").text("发送验证码").addClass("weui-btn_blue").removeClass("weui-btn_gray");
                return;
            }

            console.log("num", num);
            timer = setTimeout(function () {
                countdown(num);
            }, 1000);
        }

        // 点击注册
        $(".btn-register").click(function () {
            var mobile = $("input[name='mobile']").val();
            var password = $("input[name='password']").val();
            var code = $("input[name='validateCode']").val();

            // 验证手机号
            var info = InputStrategy.check("isMobile", mobile);
            if (info) {
                return $.toast(info, "text");
            }

            // 密码不能为空
            if (!password) {
                return $.toast("密码不能为空", "text");
            }
            // 验证码不能为空
            if (!code) {
                return $.toast("验证码不能为空", "text");
            }
            save('/register', '#formInfo', function (res) {
                // 注册成功跳到登录页面
                if (res.code == 10000) {
                    window.location.href="/mobile/mine"
                }
            });
        });
    </script>
@endsection
